<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="flag==1">
      <el-tab-pane label="施工单位" name="first">
        <div class="top_input">
          <div>
            施工片块：
            <el-select v-model="value" placeholder="全部">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div>
            开始时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            截止时间：
            <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            <el-button type="primary">查询</el-button>
          </div>
        </div>
        <div class="zonghe_table">
          <!-- <div>施工前、施工后列表</div> -->
          <div style="margin:30px 20px 10px 20px;">施工前</div>
          <el-table :data="shigongList" style="width: 100%" v-loading='isSgqLoading'>
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="startTime" label="施工时间"></el-table-column>
            <el-table-column prop="sgqPlace" label="施工位置"></el-table-column>
            <el-table-column prop="" label="施工状态">
              <template slot-scope="scope">
                <span v-if="scope.row.sghPlace">施工后</span>
                <span v-else>施工前</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="logDetail" label="施工日志"></el-table-column> -->
            <el-table-column label="操作" fixed="right">
               <template slot-scope="scope">
              <!-- <template> -->
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,1)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal"
              @current-change="showPage"
              :current-page="needInfo.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
            ></el-pagination>
          </div>
          <div style="margin:30px 20px 10px 20px;">施工中</div>
          <el-table :data="shigongzhongList" style="width: 100%" v-loading='isSgzLoading'>
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="time" label="施工时间"></el-table-column>
            <el-table-column prop="place" label="施工位置"></el-table-column>
            <el-table-column prop="" label="施工状态">
              <template>
                <span>施工中</span>
              </template>
            </el-table-column>
            <el-table-column prop="logDetail" label="施工日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--  <template slot-scope="scope"> -->
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,2)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal2"
              @current-change="showPage2"
              :current-page="needInfo2.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo2.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
            ></el-pagination>
          </div>
          <div style="margin:30px 20px 10px 20px;">施工后</div>
          <el-table :data="shigonghouList" style="width: 100%" v-loading='isSghLoading'>
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="施工片块"></el-table-column>
            <el-table-column prop="time" label="施工时间"></el-table-column>
            <el-table-column prop="place" label="施工位置"></el-table-column>
            <el-table-column prop="" label="施工状态">
              <template>
                <span>施工后</span>
              </template>
            </el-table-column>
            <el-table-column prop="logDetail" label="施工日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--  <template slot-scope="scope"> -->
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="btnShigong(scope.row,3)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pages">
            <el-pagination
              @size-change="showTotal3"
              @current-change="showPage3"
              :current-page="needInfo3.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="needInfo3.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalPage"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="监管单位" name="second">
        <div class="top_input">
          <div>
            监理片块：
            <el-select v-model="jianliValue" placeholder="全部">
              <el-option
                v-for="item in jianliInfo"
                :key="item.landId"
                :label="item.landName"
                :value="item.landId"
              ></el-option>
            </el-select>
          </div>
          <div>
            开始时间：
            <el-date-picker v-model="jianliStarTime" value-format="yyyy-MM-dd HH:mm:ss" @blur="getJianliInfo" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            截止时间：
            <el-date-picker v-model="jianliEndTime" value-format="yyyy-MM-dd HH:mm:ss" @blur="getJianliInfo" type="date" placeholder="选择日期"></el-date-picker>
          </div>
          <div>
            <el-button type="primary" @click="btnJianliSearch">查询</el-button>
          </div>
        </div>
        <div class="zonghe_table">
          <el-table :data="jianliInfo" style="width: 100%">
            <el-table-column type="index" show-overflow-tooltip label="序号"></el-table-column>
            <el-table-column prop="landName" label="监理片块"></el-table-column>
            <el-table-column prop="time" label="监理时间"></el-table-column>
            <el-table-column prop="place" label="监理位置"></el-table-column>
            <el-table-column prop="logDetail" label="监理日志"></el-table-column>
            <el-table-column label="操作" fixed="right">
              <!--   -->
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="btnJianli(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages">
          <el-pagination
            @size-change="showTotal1"
            @current-change="showPage1"
            :current-page="needInfo1.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="needInfo1.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalPage1"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="landInfo" v-if="flag==2">
      <div class="back">
        <el-button icon="el-icon-back" size="small" @click="flag=1">返回</el-button>
      </div>
      <div class="title" v-if="activeName=='first'">
          <p class="title_one">{{shigongRowInfo.landName}}</p>
          <p class="title_little">
            <span>施工时间：{{shigongType==1?shigongRowInfo.startTime:shigongType==2?shigongRowInfo.time:shigongRowInfo.finishTime}}</span>
            <span>施工位置：{{shigongType==1?shigongRowInfo.sgqPlace:shigongType==2?shigongRowInfo.place:shigongRowInfo.sghPlace}}</span>
          </p>
      </div>
      <div class="title" v-if="activeName=='second'">
          <p class="title_one">{{rowInfo.landName}}</p>
          <p class="title_little">
            <span>监理时间：{{rowInfo.time}}</span>
            <span>监理位置：{{rowInfo.place}}</span>
          </p>
      </div>
      <div class="project_position"  v-if="activeName=='second'">
        <div class="project_title">
          <span>监管日志描述</span>
        </div>
        <div class="project_img">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            resize='none'
            readonly
            v-model="rowInfo.logDetail">
          </el-input>
        </div>
      </div>
      <div class="project_position">
        <div class="project_title">
          <span v-if="activeName=='first'">施工位置信息</span>
          <span v-if="activeName=='second'">监管位置信息</span>
        </div>
        <div class="project_img">
          
          <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
        </div>
      </div>
      <div class="project_position">
        <div class="project_title">
          <span v-if="activeName=='first'">施工现场多媒体资料</span>
          <span v-if="activeName=='second'">监管现场多媒体资料</span>
        </div>
        <div class="project_img">
          <el-table :data="imgArr" border style="width: 100%"  v-if="activeName=='first'&&(shigongType==1||shigongType==3)">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
           <el-table :data="imgArrOrVcr" border style="width: 100%"  v-if="activeName=='first'&&shigongType==2">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <el-table :data="jianliDetailList" border style="width: 100%" v-if="activeName=='second'">
       
            <el-table-column type="index" show-overflow-tooltip label="序号" width="60"></el-table-column>
              <el-table-column prop="name" label="类型"  width="200"></el-table-column>
              <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary"  fixed="left" @click="btnSeeImg(scope.row)">查看</el-button>
                  </template>
              </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" :before-close="handleClose" :visible.sync="seeImgDialog" width="50%">
      <div class="seeImg"  v-if="activeName=='first'&&shigongType==2">
        <div class="imgBox" style="width:500px;height:500px;margin:0 auto;" v-if="showImgType==1">
          <img style="width:100%;height:100%;" :src="$https+path" alt="">
        </div>
        <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType==2">
          <video id="showVedio" autoplay controls style="width:100%;height:100%;" :src="$https+path"></video>
        </div>
      </div>
      <div class="seeImg"  v-if="(activeName=='first'&&(shigongType==1||shigongType==3))||activeName=='second'">
        <img :src="$https+path" width="80%" height="500">
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  shigongInfo,jianliInfo,jianliDetailInfo,shigongzhongInfo,
  shigongAfterDetail,shigongBeforeDetail,constructingSuperviseInfo,constructingLaterSupervisingInfo,constructingConstructSupervisingCheck
} from "@/api/projectImplementation";
import tdMap from "@/components/tdMap";
export default {
  components: {
    tdMap
  },
  data() {
    return {
      flag:1,
      activeName: "first",
      textarea:'',
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "莲花村片区片块7-1"
        },
        {
          value: "2",
          label: "莲花村片区片块7-2"
        },
        {
          value: "3",
          label: "莲花村片区片块7-3"
        }
      ],
      value: "",
      value1: "",
      
      currentPage4: 4,
      seeImgDialog:false,
      // imgArr:[
      //   {name:'西北方位照片',path:''},
      //   {name:'东北方位照片',path:''},
      //   {name:'东南方位照片',path:''},
      //   {name:'西南方位照片',path:''},
      //   {name:'360度全景照片',path:''},
      // ],
      imgArr:[],
      shigongImgArr:[],//施工图片
      jianliImgArr:[],//监理图片
      title:'',
      needInfo:{
        page:1,
        size:5
      },
      shigongList:[],//项目施工
      totalPage:0,
      jianliInfo:[],//监理信息
      needInfo1:{
        page:1,
        size:5
      },
      needInfo2:{
        page:1,
        size:5
      },
      needInfo3:{
        page:1,
        size:5
      },
      totalPage1:0,
      totalPage2:0,
      totalPage3:0,
      jianliDetailList:[],//监理详情
      path:'',
      rowInfo:'',
      jianliValue:'',
      jianliStarTime:'',
      jianliEndTime:'',

      shigongzhongList:[],

      shigongAfer:'', //施工后
      shigongBefore:'', //施工前
      shigongZhong:'', //施工中
      shigongRowInfo:'', //单条数据
      shigongType:1, //施工状态 1 施工前 2 施工中 3 施工后
      shigonghouList:[], //施工后数组

      imgArrOrVcr:[], //施工中图片视频列表
      showImgType:1, //区别视频图片

      isSgqLoading:false,
      isSgzLoading:false,
      isSghLoading:false,

      mainDataData:[],
    };
  },
  created(){
    this.getShigongInfo()
    this.getJianliInfo()
    this.getShigongzhong() //获取施工中
    this.getShigonghou()
  },
  methods: {
    handleClose(){
      this.seeImgDialog=false
      if(this.showImgType==2){
        var vedio=document.getElementById("showVedio")
        vedio.currentTime = 0
        vedio.pause()
      } 
    },
    btnShigong(row,type){
      this.shigongRowInfo=row
      this.shigongType=type
      console.log(this.shigongRowInfo,"施工前中后")
      console.log(row,'shigong')
      if(type==1||type==3){
        let obj={
          landId:row.landId
        }
        shigongBeforeDetail(obj).then(res=>{
          console.log(res,'施工前or施工后')
            if(type==1){
              if(res.data!=null){
                this.mainDataData=res.data
                this.shigongBefore=res.data
                let arr=[]
                if(res.data.sgqPhoto1Path!=null || res.data.sgqPhoto1Path!=''){
                  arr.push({name:'西北方位照片',path:res.data.sgqPhoto1Path})
                }
                if(res.data.sgqPhoto2Path!=null||res.data.sgqPhoto2Path!=''){
                  arr.push({name:'东北方位照片',path:res.data.sgqPhoto2Path})
                }
                if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
                  arr.push({name:'东南方位照片',path:res.data.sgqPhoto3Path})
                }
                if(res.data.sgqPhoto4Path!=null||res.data.sgqPhoto4Path!=''){
                  arr.push({name:'西南方位照片',path:res.data.sgqPhoto4Path})
                }
                if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
                  arr.push({name:'360度全景照片',path:res.data.sgqProspectPath})
                }
                
                this.imgArr=arr
                
              }
            }else{
              if(res.data!=null){
                this.mainDataData=res.data
                this.shigongAfer=res.data
                let arr=[]
                if(res.data.sghPhoto1Path!=null || res.data.sghPhoto1Path!=''){
                  arr.push({name:'西北方位照片',path:res.data.sghPhoto1Path})
                }
                if(res.data.sghPhoto2Path!=null||res.data.sghPhoto2Path!=''){
                  arr.push({name:'东北方位照片',path:res.data.sghPhoto2Path})
                }
                if(res.data.sgqPhoto3Path!=null||res.data.sgqPhoto3Path!=''){
                  arr.push({name:'东南方位照片',path:res.data.sgqPhoto3Path})
                }
                if(res.data.sghPhoto4Path!=null||res.data.sghPhoto4Path!=''){
                  arr.push({name:'西南方位照片',path:res.data.sghPhoto4Path})
                }
                if(res.data.sgqProspectPath!=null||res.data.sgqProspectPath!=''){
                  arr.push({name:'360度全景照片',path:res.data.sgqProspectPath})
                }
                
                this.imgArr=arr
               
              }
            }
        })
      }else if(type==2){
        let obj={
          page:1,
          size:99999,
          photo:row.photo?row.photo:'',
          vcr:row.vcr?row.vcr:''         
        }
        constructingConstructSupervisingCheck(obj).then(res=>{
          console.log(res,'施工中')
          if(res.data!=null){
            this.mainDataData=res.data
            this.shigongZhong=res.data
            var imageGeShi=["bmp","pcx","png","jpg","jpeg","gif","tiff"]
            var videoGeShi=["mp4","avi","flv","rmvb","mkv","gif","mov","rm","3gp"]
            var mainList=[]
            var mainList1=[]
            res.data.rows.forEach((item,index)=>{
              imageGeShi.forEach(item1=>{
                if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
                  mainList.push({name:'施工后图片',path:item.filePath,type:1})
                }
              })
            })
            res.data.rows.forEach((item,index)=>{
              videoGeShi.forEach(item1=>{
                if(item.fileKey.substring(item.fileKey.indexOf('.')+1,item.fileKey.length)==item1){
                  mainList1.push({name:'施工后视频',path:item.filePath,type:2})
                }
              })
            })
            //名称处理
            mainList.forEach((item,index)=>{
              item.name=item.name+(index!=0?index:'')
            })
            mainList1.forEach((item,index)=>{
              item.name=item.name+(index!=0?index:'')
            })

            this.imgArrOrVcr=mainList.concat(mainList1)
          }
        })
      }
      this.flag=2
    },
    btnJianli(row){
      console.log(row,'row')
      this.rowInfo=row
      let obj={
        page:1,
        size:20,
        landId:row.landId
      }
      jianliDetailInfo(obj).then(res=>{
        console.log(res,'res')
        let arr=res.data
        // if(res.data!=null){
          this.flag=2
          res.data.rows.forEach((item,index) => {
            this.jianliDetailList.push({
              name:'现场监理照片'+(index+1),
              path:item
            })
          });
          console.log(this.jianliDetailList,'现场监理照片')
        // }
      })
    },
    btnJianliSearch(){
      let obj={
        page:this.needInfo.page,
        size:this.needInfo.size,
        projectId:localStorage.getItem("projectId"),
        // projectId:27,
        landId:this.jianliValue,
        startTime:this.jianliStarTime,
        stopTime:this.jianliEndTime
      }
      jianliInfo(obj).then(res=>{
        console.log(res,'search')
        this.jianliInfo=res.data.rows
        this.totalPage1=res.data.total
      })
    },
    getJianliInfo(){//项目实施监理单位
      let obj={
        page:this.needInfo1.page,
        size:this.needInfo1.size,
        projectId:localStorage.getItem("projectId"),
        // projectId:27,
      }
      jianliInfo(obj).then(res=>{
        console.log(res,'jianli')
        this.jianliInfo=res.data.rows
        this.totalPage1=res.data.total
      })
    },
    getShigongzhong(){
      let obj={
        page:this.needInfo2.page,
        size:this.needInfo2.size,
        projectId:localStorage.getItem("projectId"),
      }
      this.isSgzLoading=true
      constructingSuperviseInfo(obj).then(res=>{
        console.log(res,'shigongzhogn')
        this.isSgzLoading=false
        this.shigongzhongList=res.data.rows
        this.totalPage2=res.data.total
      }).catch(error=>{
        this.isSgzLoading=false
      })
    },
    //施工后
    getShigonghou(){
      let obj={
        page:this.needInfo3.page,
        size:this.needInfo3.size,
        projectId:localStorage.getItem("projectId"),
      }
      this.isSghLoading=true
      constructingLaterSupervisingInfo(obj).then(res=>{
        console.log(res,'shigonghou')
        this.this.isSghLoading=false
        this.shigonghouList=res.data.rows
        this.totalPage3=res.data.total
      }).catch(error=>{
        this.isSghLoading=false
      })
    },
    getShigongInfo(){//项目实施施工单位
      let obj={
        page:this.needInfo.page,
        size:this.needInfo.size,
        projectId:localStorage.getItem("projectId"),
        // projectId:27,
      }
      this.isSgqLoading=true
      shigongInfo(obj).then(res=>{
        this.isSgqLoading=false
        console.log(res,'shigongqian')
        this.shigongList=res.data.rows
        this.totalPage=res.data.total
      }).catch(error=>{
        this.isSgqLoading=false
      })
    },
    btnSeeImg(row){
      this.title=row.name
      this.path=row.path
      if(row.type){
        this.showImgType=row.type
        if(row.type==2){
          var vedio=document.getElementById("showVedio")
          vedio.play()
        }
      }
      this.seeImgDialog=true
    },
    showPage(val){
      console.log(val,'val')
      this.needInfo.page=val
      this.getShigongInfo()
    },
    showTotal(val){
      this.needInfo.size=val
      this.getShigongInfo()
    },
    showPage1(val){
      console.log(val,'val')
      this.needInfo1.page=val
      this.getJianliInfo()
    },
    showTotal1(val){
      this.needInfo1.size=val
      this.getJianliInfo()
    },
    showPage2(val){
      console.log(val,'val')
      this.needInfo2.page=val
      this.getShigongzhong()
    },
    showTotal2(val){
      this.needInfo2.size=val
      this.getShigongzhong()
    },
    showPage3(val){
      console.log(val,'val')
      this.needInfo3.page=val
      this.getShigonghou()
    },
    showTotal3(val){
      this.needInfo3.size=val
      this.getShigonghou()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
   
  }
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.box {
  padding: 30px;
}
.top_input {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #444444;
}
.top_input div {
  margin-right: 20px;
}
.zonghe_table {
  margin: 20px 0px;
}
.pages {
  text-align: center;
  margin: 20px;
}
.seeImg{
  text-align: center;
}
.landInfo{
 border: 1px solid #efefef;
 box-sizing: border-box;
}
.back{
  margin: 20px;
}
.title_one{
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #444;
    font-weight: bold;

  }
  .title_little{
    
    font-size: 13px;
    color: #999;
    margin: 40px 20px 20px 30px;
    
  }
.title .title_little span{
      margin-right: 30px;
    }
    .project_title{
  background: #f8f8f8;
  height: 50px;
  background: #f8f8f8;
  padding: 0px 30px;
  line-height: 50px;
  color: #48494d;
  font-size: 14px;
  font-weight: bold;
   border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
}
.project_img{
  padding: 30px;
}
.mapBox_right{
  width: 950px;
}
</style>